

/* 普通注释  会保留到编译后的文件 */
// 静默注释  只保留在SASS源文件中，编译后被省略。

// SASS允许使用变量，所有变量以$开头。  => 存储数据

@use "sass:math";  //使用sass中的math模块

$hot:#e1251b;
$cool:#CCFFFF;
$warm:#FFCCCC;
$grey:#999999;
$success:#33CC99;
$dange:red;

$typeArea:1226px;

$typeOne: 14px/16px "微软雅黑"; 
$typeTwo: 14px/16px "宋体"; 

$side:left;

@function pxTopem($val){
  @return math.div($val,100px)*1rem;
}

.w{
  width: $typeArea;
  margin: 0 auto;
}

body{
  font:$typeArea;
}

.header{
  width: $typeArea;
  height: 45px;
  background-color: $grey;

  // 若需要将变量拼接到 css属性名/属性值中 需要用插值语句 #{}
  border-#{$side}:1px solid $success;
}

// sass中的运算符规则
// 加法运算:  数值相加 单位保留
// 减法运算:  数值相减 单位保留
// 乘法运算:  数值相乘 单位保留(px*px)    => 建议一个有单位 一个没有单位
// 除法运算:  一个有单位 一个没有单位 => 数值运算 单位保留
//           两个有相同的单位    => 数值运算 单位舍去


.searchBar{
  // width: $typeArea*5;
  background-color: $success;

  width: 100px+100px;
  width: 100px-100px;
  width: 100px*100;
   // width: (100px / 100);
  // width:math.div(100px, 100px);

  width: pxTopem((1126px));

}
